<template>
  <div class="height-88" style="font-size: 0.65rem;padding: 0 0.75rem 0 0.75rem;background-color: #fff;height: 2.2rem;line-height:2.2rem;">
    <span class="tabs-tab" v-for="(item,index) in tabArr" v-bind:class="{'tabs-tab-active':index==num}" @click="switchClick(index)">{{item}}</span>
    <span style="float: right;" @click="rightFunc"  :style="{'color':rightColor}" >{{rightName}}<span class="qs-triangle-down"></span></span>
  </div>
</template>
<script>
  export default{
    name:"title-tabs",
    props: {
      tabArr:{
        default(){
          return ['tab','tab1']
        }
      },
      rightColor:{
        type:String,
        default: '#000'
      },
      rightName:{   // 可选字段，有默认值""
        type:String,
        default: "内容"
      },
      rightMethod:{ //传入右边的方法名,需在调用的地方定义本地方法
        type:Function,
        default:null
      },
    },
    data(){
      return{
          num:0
      }
    },
    methods:{
      switchClick(index){
          this.num=index;
      },
      rightFunc(){
          this.rightMethod();
      }
    }
  }
</script>
